<template>
  <view @click="handleDetail" class="w-full  bg-white rounded-md box-shadow text-#1C213E mb-3"  style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)">
    <view class="w-full grid grid-cols-3 text-14px">
      <view class="w-full col-span-2 pl-2 pt-2">
        {{ data.typeName }}单号：<label class="ml-1">{{ data.orderNo }}</label>
      </view>
      <view class="w-full col-span-1 flex items-center justify-end">
        <view class=" w-64px h-24px  flex items-center justify-center text-white text-12px font-bold" :class="data.statusId === 0 ? 'bg-red' : data.statusId === 1 ? 'bg-yellow' : data.statusId === 2 ? 'bg-green' : 'bg-gray'" style="border-radius: 0px 8px 0px 8px;">{{ data.statusName }}</view>
      </view>
    </view>
    <view class="flex items-center justify-center px-3">
      <view class="relative text-right">
        <image :src="data.picUrl || $getImageUrl('no_picture.png')" mode="aspectFit" class="rounded-md w-180 h-180"  @error="$getImageUrl('no_pictures.png')" />
      </view>
      <view class="flex-1 !pl-3">
        <view class="w-full text-16px">{{ data.productName }}</view>
        <view class="w-full text-#7D8792 text-14px my-1">规格：{{ data.specifications }}</view>
        <view class="grid grid-cols-3 ">
          <view class="col-span-2 text-left text-14px text-#7D8792">数量：{{ data.number }}</view>
          <view class="col-span-1 flex items-center justify-end">
            <view v-if="data.statusId === 0" class="w-53px h-28px bg-#ffffff text-#1684FC border-1 border-solid border-#1684FC rounded text-12px flex items-center justify-center">去处理</view>
          </view>
        </view>
      </view>
    </view>
    <view class="w-full px-3">
      <view class="grid grid-cols-3 text-#B0B7C2 text-12px border-0 text-#1C213E border-t-1 border-solid border-#F6F6F6 bg-white py-3">
        <view class="col-span-2 text-left">产地来源：{{ data.origin }}</view>
        <view class="col-span-1 text-right">{{ datetimeFormat2(data.createTime) }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts" name="OrdersItem">
import { onReady } from '@dcloudio/uni-app'
import { req } from '@/api/req'
import { datetimeFormat2 } from '@/utils/datetime'

const props = withDefaults(defineProps<{
  data?: any,
}>(), {
  data: () => {}, // 默认值为 null
})

const emits = defineEmits<{
  (event: 'change', value: string): void
}>()

/**
 * 详情
 */
async function handleDetail() {
  await uni.navigateTo({
    url: `/pages/workbench/workOrder/detail?id=${props.data?.id}`,
  })
}

</script>
<style scoped lang="scss">
.bg-red{
  background-color: #FF5C4B;
}
.bg-green{
  background-color: #16BF9D;
}
.bg-gray{
  background-color: #909399;
}
.bg-yellow{
  background-color: #FFB74B;
}
</style>
